<template>
      <div id="author">
          <!-- 头部 -->
          <my-header fixed title='认证作者'>
              <a class="back-black" slot='left' @click='$router.go(-1)'></a>
          </my-header>
          <!-- 正文 -->
          <div class="content" :class="{isIOS: $store.state.device == 'ios'}">
              <div class="container" v-swiper:swiperRight='true' style="background:#f8f8f8;">
                 <div class="author_input">
                    <div class="author_input_item">
                        <label>真实姓名</label>
                        <input type="text" name="" value="" placeholder="请输入您的真实姓名">
                    </div>
                    <div class="author_input_item">
                        <label>身份证号码</label>
                        <input type="text" name="" value="" placeholder="请输入您的身份证号码">
                    </div>
                 </div>
                 <div class="author_uploadimg">
                    <div class="author_uploadimg_title">身份证照片</div>
                    <div class="author_uploadimg_box">
                      <div class="author_uploadimg_item">
                        <img src="~@/assets/img/w_releBtn.png">
                        <span>身份证正面</span>
                      </div>
                      <div class="author_uploadimg_item">
                        <img src="~@/assets/img/w_releBtn.png">
                        <span>身份证正面</span>
                      </div>
                    </div>
                    <div class="author_uploadimg_hint">
                      说明：必须填写真实信息，一旦发现信息造假，将删除改会员！
                    </div>
                 </div>
                 <div class="btnList">
                    <button class="app-btn app-btn-login" @click.stop='reset'>
                        提交
                    </button>
                 </div>
              </div>
          </div>
      </div>
</template>
<script>
export default {
    name: 'author',
    data () {
        return {
        }
    },
    watch: {
    }
}
</script>
<style lang='stylus'>
#author {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1000;
    .content {
        position: relative;
        background: #f6f7fa;
    }
    .author_input {
        background: #fff;
        margin-top: 20px;
        .author_input_item {
           height: 1.5rem;
           line-height: 1.5rem;
           margin-left: 20px;
           border-bottom: 1px solid #f8f8f8;
           input {
             height: 1rem;
             outline: none;
             padding-left: 10px;
           }
           input::placeholder{
               color: #cacaca;
               font-size: 15px;
           }
        }
    }
    .author_uploadimg {
       background: #fff;
       margin-top: 20px;
       padding: 0 20px;
       .author_uploadimg_title {
         height: 1.5rem;
         line-height: 1.5rem;
       }
       .author_uploadimg_box {
         display: flex;
         justify-content: space-between;
         padding-bottom: 20px;
         .author_uploadimg_item {
            display: flex;
            flex-direction: column;
            border: 1px solid #f2f2f2;
            padding: 15px 35px;
            font-size: 14px;
            color: #cacaca;
            text-align: center;
         }
       }
       .author_uploadimg_hint {
         font-size: 11px;
         color: #f34d4d;
         padding-bottom: 20px;
       }
    }
    .btnList{
        margin-top: 30px;
        .app-btn{
            width: 80%;
            height: 40px;
            border-radius: 100px;
            margin: 0 auto;
            display: block;
            margin-bottom: 10px;
            font-size: 14px;
            background: none;
        }
        .app-btn-login{
            background: #f48081;
            color: #fff;
        }
        .app-btn-reg{
            border: solid 1px #f48081;
            color: #f48081;
        }
    }
}
</style>
